<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery获取Html元素位置</title>
    <style type="text/css">
        .initDiv{
            display: block;
            width: 80px;
            height: 80px;
            margin-left: 200px;
            margin-top: 100px;
           background: paleturquoise;
           text-align: center;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>jQuery获取Html元素位置</legend>
        <div class="initDiv" id="testDiv">
            我是div1
        </div>
    </fieldset>
</body>

<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    /**
     * $(function(){
     *      //页面加载完成后的处理，固定写法
     * });
     *
     */
    $(function () {
        var offset = $('#testDiv').offset();//元素在当前视口的相对偏移，返回的是一个Object:{left:24,top:34.59375}
        console.log("元素在当前视口的相对偏移量");
        console.log(offset);

        console.log("元素在当前视口的相对顶部偏移量");
        console.log(offset.top);//获取距离顶部的偏移量

        console.log("元素在当前视口的相对左边偏移量");
        console.log(offset.left);//获取距离左边的偏移量

        console.log("元素相对父元素的偏移量");
        var position = $('#testDiv').position();//元素相对父元素的偏移量,对可见元素有效，Object {top: 117, left: 250}
        console.log(position);
    });
    
</script>
</html>